<template>
  <view class="list">
    <view class="tabs-box flex flex-bt" :style="{ top: statusBarHeight }">
      <u-tabs
        class="tabs"
        :lineWidth="30"
        :lineHeight="4"
        :list="tabs"
        :activeStyle="{
          color: '#070B1C',
          fontWeight: 'bold',
          fontSize: '32rpx',
        }"
        :inactiveStyle="{
          color: '#070B1C',
          fontSize: '32rpx',
        }"
        :lineColor="`linear-gradient(90deg, #466cf3 0%, #ffffff 100%)`"
        @change="onChangeType"
      ></u-tabs>
      <view @click="onShowFilter" class="filter flex flex-a">
        <text class="dark-text fs-24">筛选</text>
        <image
          src="../../../assets/images/icons/filter.png"
          class="filter-icon"
          style="width:32rpx;height: 32rpx;margin-left:8rpx"
          mode="scaleToFill"
        />
      </view>
    </view>
    <view class="list-box">
      <Card class="card" v-for="(item,index) in list" :key="index" :info="item"/>
    </view>
    <u-popup round="32rpx" :show="showFilter" @close="close" @open="open">
      <view class="filter-content">
        <view class="title">
          <text class="fs-36 bold black">全部筛选</text>
          <u-icon class="close" name="close" @click="close"></u-icon>
        </view>
        <scroll-view
          class="scroll-view"
          scroll-y="true"
          bindscrolltolower="loadMore"
        >
          <view class="f-item" v-for="(filter, index) in filters" :key="index">
            <text class="f-title fs-32 dark-text bold">{{ filter.title }}</text>
            <view class="flex flex-a">
              <text
                v-for="(type, i) in filter.types"
                :key="i"
                class="f-type"
                :class="[type.id == filtersSelected[index] ? 'active' : '']"
                @click="onFilterType(index, type)"
              >
                {{ type.name }}
              </text>
            </view>
          </view>
        </scroll-view>
        <view class="btns flex">
          <text @click="onReset" class="btn default-btn">重置</text>
          <text @click="onConfirm" class="btn active-btn">确定</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script>
import Card from "../../../compennts/drama/Card.vue";
import { statusBarHeight } from "../../../assets/utils/config";
import { getDramas } from "../../../api/drama/index";
export default {
  props:{
    onBottom:0
  },
  components: {
    Card,
  },
  data() {
    return {
      statusBarHeight: parseInt(statusBarHeight) - 10 + "px",
      tabs: [
        {
          name: "新剧推荐",
          type: 1,
          url: "/api/video_drama/list/sort_by_recommend",
        },
        {
          name: "收益排行",
          type: 2,
          url: "/api/video_drama/list/sort_by_income",
        },
        {
          name: "最多推广",
          type: 3,
          url: "/api/video_drama/list/sort_by_promotion_count",
        },
      ],
      list:[],
      showFilter: false,
      filtersSelected: [null, null],
      filters: [
        {
          title: "投稿渠道",
          types: [
            {
              name: "全部",
              id: null,
            },
            {
              name: "抖音",
              id: 0,
            },
            {
              name: "快手",
              id: 1,
            },
            {
              name: "微信",
              id: 2,
            },
          ],
        },
        {
          title: "结算方式",
          types: [
            {
              name: "全部",
              id: null,
            },
            {
              name: "充值",
              id: 0,
            },
            {
              name: "星图",
              id: 1,
            },
            {
              name: "聚星",
              id: 2,
            },
          ],
        },
      ],
      path:'',
      query:{
        pageNum:1,
        pageSize:20,
        promotionChannel:null,
        settleType:null,
        onlineTimeStart:'',
        onlineTimeEnd:'',
        vname:'',
        categoryIds:[]
      }
    };
  },
  mounted() {
    this.path = this.tabs[0].url
    this.onGetDramas()
  },
  onLoad() {
    
  },
  watch:{
    onBottom(val){
      this.query.pageNum += 1
      this.onGetDramas(true)
    },
    query(val){
      this.onGetDramas()
    }
  },
  methods: {
    onGetDramas(isLoadMore){
      uni.show
      getDramas(this.path,this.query).then(res=>{
        console.log(res) 
        if(isLoadMore){
          this.list = [...this.list,...res.rows]
        }else{
          this.list = res.rows          
        }
      })
    },
    close() {
      console.log('close')
      this.filtersSelected[0] = this.query.promotionChannel
      this.filtersSelected[1] = this.query.settleType
      this.showFilter = false;
      setTimeout(() => {
        uni.showTabBar();
      }, 300);
    },
    open() {},
    onShowFilter() {
      uni.hideTabBar();
      this.showFilter = true;
    },
    onFilterType(idx, item) {
      this.filtersSelected[idx] = item.id;
      this.$set(this.filtersSelected, idx, item.id);
    },
    onReset() {
      this.filtersSelected = [null, null];
    },
    onConfirm() {
      console.log('ooo')
      this.showFilter = false
      this.query.pageNum = 1
      this.query.promotionChannel = this.filtersSelected[0]
      this.query.settleType = this.filtersSelected[1]
      this.onGetDramas()
      setTimeout(() => {
        uni.showTabBar();
      }, 300);
    },
    onChangeType(e) {
      console.log(e);
      this.query.pageNum = 1
      this.path = e.url
      this.onGetDramas()
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../assets/styles/common.less");
.list {
  width: 100%;
  box-sizing: border-box;
  .tabs-box {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    position: sticky;
    top: 80rpx;
    background: #ffffff;
    z-index: 10;
    padding-bottom: 24rpx;
    .tabs {
      flex-shrink: 1;
      margin-left: -22rpx;
      margin-right: 20rpx;
      width: calc(100% - 100rpx);
    }
    .filter {
      flex-shrink: 0;
      flex-wrap: nowrap;
      justify-content: flex-end;
      flex-grow: 1;
      width: 100rpx;
    }
  }
}
.list-box {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 32rpx;
  .card {
    width: calc((100% - 32rpx) / 3);
    margin-bottom: 24rpx;
    margin-right: 16rpx;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}
.filter-content {
  padding: 48rpx 0;
  box-sizing: border-box;
  .title {
    padding: 0 48rpx;
    text-align: center;
    position: relative;
    line-height: 36rpx;
    .close {
      position: absolute;
      right: 48rpx;
      top: 0;
      font-size: 48rpx;
    }
  }
  .f-item {
    padding: 0 48rpx;
    margin-top: 48rpx;
    .f-title {
      color: rgba(7, 11, 28, 0.8);
    }
    .f-type {
      flex: 1;
      margin-right: 16rpx;
      padding: 8rpx;
      border-radius: 8rpx;
      border: 2rpx solid #f5f7fe;
      background: #f5f7fe;
      text-align: center;
      color: rgba(7, 11, 28, 0.6);
      margin-top: 24rpx;
      &:nth-last-child(1) {
        margin-right: 0;
      }
      &.active {
        color: #436af3;
        border-color: #436af3;
      }
    }
  }
  .btns {
    padding: 24rpx 48rpx 0 48rpx;
    margin-top: 28rpx;
    border-top: 2rpx solid #e9e9ea;
    .btn {
      flex: 1;
      height: 88rpx;
      line-height: 88rpx;
      &:nth-child(1) {
        margin-right: 22rpx;
      }
    }
  }
}
</style>
